<script setup>
import {getEvaluateTemplate, studentEvaluate} from "/src/api/hbmy_wx/StudentEvaluateService";
import {Dialog, Toast} from 'vant';
const activeName = ref([])
const test=ref()
const value = ref ()
const props = defineProps({
  courseInfo: Object,
  title: String,
  modelValue: {
    type: Boolean,
    default: true
  },
});
const template = ref({})
const emit = defineEmits(['update:modelValue'])
const tableVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value)
  }
});
const back = () => {
  tableVisible.value = true
}
const evaluationSystemItems = ref([])
const evaluateSystemID = ref(-1)

const getCourseEvaluateTemplate = async () => {
  const res = await getEvaluateTemplate(props.courseInfo.evaluationCourseType)
  template.value = JSON.parse(res.response.value.extend.template)
  evaluationSystemItems.value = template.value.evaluationSystemItems
  evaluateSystemID.value = evaluationSystemItems.value[0].evaluationSystemID
}
onMounted(async () => {
  await getCourseEvaluateTemplate()
  await nextTick(() => {
    collapseRef.value.toggleAll(true);
  });
})

const message = ref(['','',''])
const columns = [
  { text: '1分', value: 1 },
  { text: '2分', value: 2 },
  { text: '3分', value: 3 },
  { text: '4分', value: 4 },
  { text: '5分', value: 5 },
  { text: '6分', value: 6 },
  { text: '7分', value: 7 },
  { text: '8分', value: 8 },
  { text: '9分', value: 9 },
  { text: '10分', value: 10 },
];
const scoreValue = ref(['','','','','','','','','','',])
const scoreArray = ref(['','','','','','','','','','',]);
// const scoreArray = ref([10,10,10,10,10,10,10,10,10,10]);
const showPicker = ref(false);
const total = computed(() => {
  let sum = 0
  for (let i = 0; i < scoreArray.value.length; i++){
    if (scoreArray.value[i] !== '')sum += scoreArray.value[i];
  }
  return sum
})
const submit = async () => {
  let totalScore = 0
  for (let i = 0; i < scoreArray.value.length; i++){
    if (scoreArray.value[i] === ''){
      Toast.fail('存在未评分项');
      return
    }
    totalScore += scoreArray.value[i]
  }
  if (totalScore > 100){
    Toast.fail('评分不能超过100分')
    return
  }
  if (totalScore <= 30){
    Toast.fail('评分不能低于30分')
    return
  }
  const studentEvaluateDTO = {
    score: scoreArray.value,
    comments: message.value,
    tcID: props.courseInfo.tcId,
    evalID: evaluateSystemID.value,
    teacherID: props.courseInfo.teacherId,
    totalScore: totalScore
  }
  const res = await studentEvaluate(studentEvaluateDTO)
  if (res.response.value.extend.msg === '评教成功！'){
    Toast.success('评教成功')
  }else Toast.fail('评教失败')
  back()
}
const onConfirm = (selectedOptions) => {
  scoreValue.value[pickerIndex.value] = selectedOptions.text
  scoreArray.value[pickerIndex.value] = selectedOptions.value
  showPicker.value = false;
};
const pickerIndex = ref(-1)
const collapseRef = ref(null)
const showPickerAndGetIndex = (pos) => {
  showPicker.value = true
  pickerIndex.value = pos
}
</script>

<template>
  <div class="header">
    <van-icon class="icon" color="#07C0E0" size="20" name="arrow-left" @click="back()">
      <!--      title放在icon标签里-->
      <span style="color: #141414; margin-left: 5px;">{{ title }}</span>
    </van-icon>
  </div>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
    />
  </van-popup>
  <van-collapse v-model="activeName" ref="collapseRef">
    <van-collapse-item v-for="item in evaluationSystemItems"
                       :title="item.name"
                       :name="item.id"
                       :is-link="false"
                       :readonly="true"
    >
      <van-field
          v-if="item.questionTypes === 0"
          v-model="scoreValue[item.displayorder - 1]"
          is-link
          readonly
          label="评分"
          placeholder="点击评分"
          @click="showPickerAndGetIndex(item.displayorder - 1)"
      />
      <van-field
          v-else
          v-model="message[item.displayorder - 11]"
          rows="2"
          autosize
          type="textarea"
          maxlength="100"
          show-word-limit
      />
    </van-collapse-item>
  </van-collapse>
  <van-collapse>
    <van-collapse-item title="评教总分"
                       :is-link="false"
                       :readonly="true">
      内容
      <template #value><strong style="color:rgb(25,137,250); margin-right:18px">{{total}}分</strong></template>
    </van-collapse-item>
  </van-collapse>
  <div style="padding:20px;">
    <van-button round block type="primary" native-type="submit" @click="submit">
      提交
    </van-button>
  </div>

</template>

<style scoped lang="less">
.header {
  background-color: #fff;
  height: 90px;
  display: flex;
  font-size: 40px;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  color: #141414;

  .icon {
    position: absolute;
    left: 30px;
  }

  .icon-shua {
    position: absolute;
    right: 30px;
    color: #07C0E0;
  }
}

/deep/ .van-field__control{
  color: #07C0E0;
}
</style>
